<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-select class="ElInput" v-model="carportCustomerBinding">
          <el-option label="全部车位" :value="''"></el-option>
          <el-option label="审批中" :value="1"></el-option>
          <el-option label="审批通过" :value="2"></el-option>
          <el-option label="审批未通过" :value="3"></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" @click="getCarport()"></el-button>
        <el-button type="success" @click="toAddCarport()">添加</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="600"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column prop="fileId" label="相关图片" width="180">
            <template slot-scope="scope">
              <el-image style="width: 110px; height: 110px" :src="scope.row.fileId"></el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="carportName"
              label="区域"
              width="180">
          </el-table-column>
          <el-table-column
              prop="carportCode"
              label="编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="carportAcreage"
              label="面积">
          </el-table-column>
          <el-table-column
              prop="carportFloor"
              label="楼层">
          </el-table-column>
          <el-table-column
              prop="carportType"
              label="车位类型">
            <template slot-scope="scope">
              {{scope.row.carportType ==0?"产权车位": scope.row.carportType == 1? "无产权车位":"是否产权车位"}}
            </template>
          </el-table-column>
          <el-table-column
            prop="carportState"
            label="车位状态">
            <template slot-scope="scope">
              {{scope.row.carportState ==0?"自用": scope.row.carportState == 1? "公用":"是否公用"}}
            </template>
        </el-table-column>
          <el-table-column
              prop="carportCustomerBinding"
              label="绑定状态">
            <template slot-scope="scope">
              {{scope.row.carportCustomerBinding ==0?"全部车位": scope.row.carportCustomerBinding == 1? "审核中": scope.row.carportCustomerBinding == 2? "审核通过": scope.row.carportCustomerBinding == 3? "审核未通过":"是否审核通过"}}
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="toUpdate(scope.row)">修改</el-button>
              <el-button type="warning" @click="delCarport(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=pageRquset.pageNum
            :page-sizes="[5, 10, 20, 30]"
            :page-size=pageRquset.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
        <!--分页-->
      </div>
      <!-- 增改弹窗 -->
      <!-- Form -->
      <el-dialog title="增改"
                 :visible.sync="dialogFormVisible"
                 :before-close="closeExpertFormDialog">
        <el-form :model="carportForm" ref="ruleForm">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="uplodSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-form-item label="区域">
            <el-input v-model="carportForm.carportName"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="carportForm.carportCode"></el-input>
          </el-form-item>
          <el-form-item label="面积">
            <el-input v-model="carportForm.carportAcreage"></el-input>
          </el-form-item>
          <el-form-item label="楼层">
            <el-input v-model="carportForm.carportFloor"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="carportForm.carportType">
              <el-option label="产权车位" :value="0"></el-option>
              <el-option label="无产权车位" :value="1"></el-option>
            </el-select>
            &nbsp; &nbsp;
            状态
            <el-select v-model="carportForm.carportState" >
              <el-option label="自用" :value="0"></el-option>
              <el-option label="公用" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdateCarport('insert')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 增改弹窗 -->
      <!-- Form -->
    </el-card>
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      currentPage2: 1,
      carportCustomerBinding:'',
      input: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      pageRquset: {
        pageSize: 5,
        pageNum: 1
      },
      restCarportForm:{
        id:0,
        fileId:'',
        carportName:'',
        carportCode:'',
        carportAcreage:'',
        carportFloor:'',
        carportType:'',
        carportState:'',
        carportCustomerBinding:'',
        createTime:'',
        updateTime:'',
        carportDelFlag:'',
      },
      carportForm:{
        id:0,
        carportName:'',
        fileId:'',
        carportCode:'',
        carportAcreage:'',
        carportFloor:'',
        carportType:'',
        carportState:'',
        carportCustomerBinding:'',
        createTime:'',
        updateTime:'',
        carportDelFlag:'',
      },
      total:0,
      imageFile:'File',
      imageUrl: '',
      tableData: []
    }
  },
  /*自动挂载*/
  mounted() {
    this.getCarport()
  },
  /*函数*/
  methods:{

    /*车行全查*/
    getCarport () {
      this.$axios.get('/memberLwh/carport/getCarport', {
        params: {
          carportCustomerBinding: this.carportCustomerBinding,
          pageSize: this.pageRquset.pageSize,
          pageNum: this.pageRquset.pageNum
        }
      }).then(res => {
        this.tableData = res.data.obj.content
        this.total = res.data.obj.total
      }).catch(error => {
        console.log(error)
      })
    },
    /*图片上传*/
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = file;
    // },
    beforeAvatarUpload (file) { // 设置图片上传格式
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.imageFile = file
      this.imageUrl = URL.createObjectURL(file)
      return false
    },
    /*图片上传成功触发函数*/
    uplodSuccess (response) {
      debugger
      this.carportForm.fileId = response.data.obj
    },
    /*添加弹窗*/
    toAddCarport(){
      this.dialogFormVisible = true
      this.carportForm = {
        id: 0
      }
    },
    // 修改的回显
    toUpdate (carport) {
      this.carportForm = carport
      this.imageUrl = carport.fileId
      this.dialogFormVisible = true
    },
    /*分页*/
    handleSizeChange (val) {
      this.pageRquset.pageSize = val
      this.getCarport()
    },
    handleCurrentChange (val) {
      this.pageRquset.pageNum = val
      this.getCarport()
    },
    // 添加弹窗里的取消按钮 点击取消是清空from表单数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
      this.carportForm = {}
    },
    // 添加点击X关闭是清空from表单数据
    closeExpertFormDialog (done) {
      this.$refs.ruleForm.resetFields()
      done()// done 用于关闭 Dialog
      this.carportForm = {}
    },
    // 车行增改
    saveOrUpdateCarport (formName) {
      const formData =  new FormData()
      if (this.imageFile) {
        formData.set('file', this.imageFile)
      }
      for (const key in this.carportForm) {
        formData.set(key, this.carportForm[key])
      }
      // const formData = new FormData()
      this.$axios.post('/memberLwh/carport/saveOrUpdateCarport', formData).then(res => {
        if (res.data.code === 200) {
          this.dialogFormVisible = false
          this.carportForm = this.restCarportForm
          alert('增改成功')
          this.getCarport()
        } else {
          alert('增改失败')
          this.insertLog("车位增改")
          this.getCarport()
        }
      })
    },
    /*车行删除*/
    delCarport(id){
      debugger
      this.$confirm('是否删除这条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/memberLwh/carport/delCarport', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.MyMessage('删除成功', 'sussess')
            this.getCarport()
          } else {
            this.insertLog("车位删除")
            this.MyMessage('删除失败', 'warning')
          }
        }).catch(res => {
          this.MyMessage('删除失败,请联系管理员', 'error')
        })
      }).catch(() => {
        this.MyMessage('已取消删除', 'info')
      })
    },
    /*提示框*/
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>